import './css/index.css';
let images = document.querySelectorAll('img');
let banner = document.querySelector('.banner');
let ul = document.querySelector('ul');
let next = document.querySelector('.next');
let pre = document.querySelector('.pre');
let dot = document.querySelectorAll('.dot');
let dotNum = 0;
let dotLastNum = 0;
let timer;

ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
ul.append(ul.children[1].cloneNode(true));
ul.style.transform = 'translateX(-100%)';

setTimeout(() => {
  ul.style.transition = 'transform 1s';
}, 100);

let index = 1;

next.addEventListener('click', nextFn);
pre.addEventListener('click', preFn);

// 下一张函数
function nextFn() {
  ul.style.transform = `translateX(-${++index}00%)`;
  dotNum++;
  if (dotNum >= dot.length) {
    dotNum = 0;
  }
  changeActive();
  // 判断是否到达最后一张, 立马跳到第二张 (等到过度效果结束之后才能跳转)
  if (index > images.length) {
    index = 1;
    // 等待过度效果结束 (transitionend 事件)
    ul.addEventListener(
      'transitionend',
      () => {
        // 关闭过渡效果
        ul.style.transition = 'none';
        // 回到第二张的位置
        ul.style.transform = `translateX(-${index}00%)`;
        // 重置 (更新元素的新样式)
        window.getComputedStyle(ul).transform;

        // 恢复动画
        ul.style.transition = 'transform 1s';
      },
      {
        // 绑定一次事件
        once: true,
      }
    );
  }
}

// 上一张函数
function preFn() {
  ul.style.transform = `translateX(-${--index}00%)`;
  dotNum--;
  if (dotNum < 0) {
    dotNum = dot.length - 1;
  }
  changeActive();
  // 判断是否到达最后一张, 立马跳到第二张 (等到过度效果结束之后才能跳转)
  if (index < 1) {
    index = images.length;
    // 等待过度效果结束 (transitionend 事件)
    ul.addEventListener(
      'transitionend',
      () => {
        // 关闭过渡效果
        ul.style.transition = 'none';
        // 回到第四张的位置
        ul.style.transform = `translateX(-${index}00%)`;
        // 重置 (更新元素的新样式)
        window.getComputedStyle(ul).transform;

        // 恢复动画
        ul.style.transition = 'transform 1s';
      },
      {
        // 绑定一次事件
        once: true,
      }
    );
  }
}

// 小圆点激活函数
function changeActive() {
  // 小圆点的激活类
  dot[dotLastNum].classList.remove('active-dot');
  // 更换激活对象
  dot[dotNum].classList.add('active-dot');
  // 更新上一次的值dotLastNum
  dotLastNum = dotNum;
}

// 小圆点点击事件
dot.forEach((el, elIndex) => {
  el.addEventListener('click', () => {
    dotNum = elIndex;
    changeActive();
    index = elIndex + 1;
    ul.style.transform = `translateX(-${index}00%)`;

    ul.addEventListener(
      'transitionend',
      () => {
        // 关闭过渡效果
        ul.style.transition = 'none';
        // 回到第二张的位置
        ul.style.transform = `translateX(-${index}00%)`;
        // 重置 (更新元素的新样式)
        window.getComputedStyle(ul).transform;

        // 恢复动画
        ul.style.transition = 'transform 1s';
      },
      {
        // 绑定一次事件
        once: true,
      }
    );
  });
});

// 自动播放
autoPlay();
function autoPlay() {
  clearInterval(timer);
  timer = setInterval(() => {
    nextFn();
  }, 3000);
}

banner.addEventListener('mouseenter', () => {
  clearInterval(timer);
});

banner.addEventListener('mouseleave', () => {
  autoPlay();
});
